<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />        
        <title>$.fn.fadeOut</title>
        <script>
            window.$$path = location.protocol + "//" + location.host;
            document.write('<script src="' + $$path + '/mass_merge.js"><\/script>')
            document.write('<script src="' + $$path + '/doc/scripts/common.js"><\/script>')
        </script>
        <style type="text/css">

            .box { height:80px; width:80px; background:#090; }
            #log { clear:left; }

        </style>

    </head>
    <body>
        <article>
            <h3>$.fn.fadeOut(duration, props)</h3>
            <p><span class="stress">描述：</span></p>
            <p>让匹配的每个节点进行淡出动画。</p>
            <p><span class="stress">参数：</span></p>
            <dl>
                <dt>duration</dt>
                <dd>可选。Number。动画执行时间，单位为ms，默认为500ms。</dd>
                <dd>可选。Function。动画结束时的回调函数</dd>
                <dt>props</dt>
                <dd>可选。Object。各种配置。</dd>
            </dl>
            <p><span class="stress">返回值：</span></p>
            <p>mass实例</p>
            <p>props配置对象可以指定各种CSS属性，如width, height, color, fontSize, opacity等进行动画变化，
                还支持scrollTop与scrollLeft这两个属性进行动画变化。还可以指定动画开始前的回调函数before,动画结束时的回调函数after,
                动画是否进行倒退reverse....
            </p>
            <fieldset ><legend>例子</legend>
                <pre class="brush:javascript;gutter:false;toolbar:false">
                $.require("ready,fx,event",function(){
                    $("#btn1").click(function() {
                        function complete(el) {
                            $("&lt;div/&gt;").text(el.id).appendTo("#log");
                        }
  
                        $("#box1").fadeOut(1600, { after: complete });
                        $("#box2").fadeOut(1600, { after: complete});
                    });

                    $("#btn2").click(function() {
                        $("#box1,#box2").show();
                        $("#log").empty();
                    });
                });
                </pre>
                <button id="btn1">fade out</button>
                <button id="btn2">show</button>

                <div id="log"></div>

                <div id="box1" class="box">linear</div>
                <div id="box2" class="box">swing</div>


            </fieldset>

        </article>
    </body>
</html>

